<!DOCTYPE html>
<html lang="zh">

<head th:replace="/fragment/head::user-head(~{::title},~{})">
    <title>标签</title>
</head>

<body>
    <div id="app">
        <nav th:replace="/fragment/nav::nav1"></nav>
        <div class="ui container">
            <div class="ui attached segment">
                <head-card :num="total"></head-card>
            </div>

            <div class="ui attached segment">
                <label-list v-for="label in labels" :label="label" :fx="get_labels"></label-list>
            </div>
            <div class="ui attached segment">
                <article-info v-for="article in articles" :article="article" :root="root">
                </article-info>
            </div>
            <br><br><br><br><br><br><br><br><br><br><br>
        </div>
        <footer th:replace="/fragment/footer::f1"></footer>
    </div>

    <script th:replace="/fragment/script::jquery"></script>
    <script th:replace="/fragment/script::semantic"></script>
    <script th:replace="/fragment/script::mobile-hide"></script>
    <script th:replace="/fragment/script::vue"></script>
    <template th:replace="/fragment/template::ac"></template>
    <template th:replace="/fragment/template::head-card('标签','种')"></template>
    <template id="label-list">
        <div class="ui labeled button" tabindex="0" @click="fx(label.lid)">
            <div class="ui green button">
                <i class="tags icon"></i> {{label.name}}
            </div>
            <a class="ui basic blue left pointing label">
                查看
            </a>
        </div>
    </template>
    <script>
        const ajax = {
            data() {
                return {
                    articles: [],
                    labels: [],
                    root: "[[@{/}]]",
                    total: 0,
                    lid: "[[${lid}]]"
                }
            },
            methods: {
                get_labels(lid) {
                    getJson(`/getBlogsByLabel/[[${session.uid}]]/${lid}`, (r) => {
                        this.articles = r;
                    });
                }
            },
            mounted() {
                getJson('/getLabels', (r) => {
                    this.labels = r.list;
                    this.total = r.total;
                }).then(
                    () => {
                        if (this.lid == -1)
                            this.get_labels(this.labels[0].lid);
                        else
                            this.get_labels(this.lid);
                    }
                );
            }
        }

        const app = Vue.createApp(ajax)

        app.component('article-info', {
            props: ['root', 'article'],
            template: '#ac'
        }).component('label-list', {
            props: ['label', 'fx'],
            template: '#label-list'
        }).component('head-card', {
            props: ['num'],
            template: '#head-card'
        })
        app.mount('#app')
    </script>
</body>

</html>